<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>IT资产管理系统</title>
    <style>
        .container-fluid > div > nav{
            min-height: 45rem;
            border-right: #aaaaaa 1px solid;
            /*align-items:center;*/
            /*display: flex;*/
        }

        .flex-column a{
            color: black;
        }
    </style>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/userMain.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/jquery.select.css">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <link rel="stylesheet" href="../css/progressbar.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div th:include="common/logo :: logo"></div><div class="container-fluid">
    <div class="row">
       <div th:include="common/nav :: nav"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">

                <div id="nr">
                    <h4 >您好: <span th:text="${session.userid}"></span></h4>
                    <h5>您具有以下权限</h5>
                    <p th:if="${session.userid == null || session.userid ==''}">浏览数据</p>
                    <p th:if="${session.userid!=null}"  id="yourPer" class="titleP">
                    </p>
                </div>


            </div>
            <br>
            <div id="toApply" class="form-group">
                <p class="titleP">
                请选择要申请的权限
                </p>
                    <div STYLE="width: 15%; margin: 0 auto;">
                        <select id="role" name="permission" class="form-control select-inline">

                        </select>
                    </div>
                <br>
                    <div STYLE="text-align: center;">
                        <textarea id="reason" rows="9" cols="41" maxlength="120" >请填写申请理由</textarea>
                        <br>
                        <input id="apply" type="button" class="btn btn-primary" value="申请" style="width: 30%">
                    </div>

            </div>
            <!--申请进度-->
            <div id="ongoing" class="" style="text-align: center">
                <h2 style="color:#6db1e6;">申请成功</h2>
                <h5 id="whatIApply"></h5>
                <div class="stepCont stepCont2" style="margin-top: 8%;">
                    <!-- <div class="ystep"></div> -->
                    <div class='ystep-container ystep-lg ystep-blue'></div>
                   <!--在progressbar.js中,将操作按钮hidden通过选择器操作-->
                </div>
            </div>


        </main>
    </div>
</div>


</body>
<script th:src="@{../js/jquery-3.4.0.min.js}" src="../js/jquery-3.4.0.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{../js/bootstrap.min.js}" src="../js/bootstrap.min.js"></script>
<script src="../js/user/main.js"></script>
<script src="../js/progressbar.js"></script>
<script>
    //初始化进度条
    var step2=new SetStep({
        content:'.stepCont2',
        clickAble:false
    })
    function getMyRole(){  //获取自己的权限
        $.ajax({
            url: "/itams/role/getMyRole",
            success:function (res) {
                console.log(res)
                $("#yourPer").html(res);
            }
        })
    }
    $(function(){
        $("#apply-nav").addClass("active")
        getMyRole();
    });
</script>
</html>